<template>
  <div class='messageList'>
		<ul>
			<!--<transition-group name="flip-list">-->
				<li class='messageListItem' v-for='item in messageList' @click="enterChat(item)" 
					v-bind:key="item.lastChatMsg!=undefined?item.lastChatMsg.sendTime:new Date().getTime()">
					<img class='avata' v-bind:src='$options.filters.parseAvata(item,userId).avatar'>
					<div class='info'>
						<p>{{item.chat.chatType==chatType.ChatSingle?$options.filters.parseAvata(item,userId).name:item.chat.title}}</p>
						<span class='time' v-if ="(item.lastChatMsg!=undefined?item.lastChatMsg.serverReceiveTime:'')!=''">{{item.lastChatMsg!=undefined?item.lastChatMsg.serverReceiveTime:''|formatTime}}</span>
						<div class='last' 
							v-html="$options.filters.parseChatStringToReadable(item.lastChatMsg!=undefined?item.lastChatMsg.chatData:'')">
						</div>
							
						<span class="toc_IM_badge" style="position: absolute;bottom:5px;right: 0;" v-if='item.lastChatMsg!=undefined?item.chatMemInfo.lastReadTime<item.lastChatMsg.sendTime:false'></span><!--  -->
					</div>	
				</li>
			</transition-group>
		</ul>
	</div>
</template>

<script>
	import systemConst from '@/assets/scripts/systemConst.js'
	import imgConfig from '@/assets/scripts/imgConfig.js'
	import units from '@/assets/scripts/units.js'
	import TOC_IM_Mixin from '@/assets/scripts/TOC_IM_Mixin.js'
	export default {
  	name: 'messageList',
  	data(){
	    	return {
	    		imgConfig:imgConfig,
	    		chatType:systemConst.ChatType
	    	}
	  },
	  filters: {
  			parseChatStringToReadable(chatString) {
  				if(typeof chatString=='string'){
  					return units.parseChatStringToReadable(chatString).replace('<br>','&nbsp');
  				}else{
  					return '[附件]'+chatString.fileName
  				};		
  			},
  			formatTime(timestamp){
  				return units.formatTime(timestamp)
  			},
  			parseAvata(messageItem,userId){
  				var results = null;
  				if(messageItem.chat.avatar=='TOC_IM_PRIVATE'){
  					if(messageItem.chat.chatType==systemConst.ChatType.ChatSingle){
  						var otherUserId=null;
  						messageItem.chat.mem.forEach(function(item){
  							if(item!=userId){otherUserId=item}
  						});
  						results={
  							avatar:otherUserId!=null?messageItem.chat.memMap[otherUserId].avatar:imgConfig.d_user,
  							name:otherUserId!=null?messageItem.chat.memMap[otherUserId].name:'',
  						};
  					}else if(messageItem.chat.chatType==systemConst.ChatType.ChatGroup){
  						results={
  							avatar:imgConfig.group,
  							name:messageItem.chat.title
  						};
  						//units.createGroupAvata(messageItem.chat.memMap)
  					};
  				}else{
  					results={
  							avatar:messageItem.chat.avatar,
  							name:''
  						};
  				};
  				return results
  			}
  	},
  	mixins: [TOC_IM_Mixin],
	  computed:{
  			userId(){return this.$store.state.userId},
  			messageList(){return this.$store.state.messageList.data},
  			currentPageName(){return this.$store.state.routerInfo.currentPageName}
  	},
		mounted(){
  			this.init();
  	},
  	beforeDestroy() {
		  	this.$bus.off('tocIM_PAGE'+this.currentPageName);
		},
  	methods:{
  			enterChat(chatInfo){
	  				this.$store.commit({
			  				type: 'upDateMessageList',
			  				chatID:chatInfo.chat._id,
			  				lastReadTime:new Date().getTime()
						});
	  				this.$root.$router.push({
			  				path: 'chat',
			  				query:{
			  					chatId:chatInfo.chat._id
			  				}
	  				});
  			}	,
  			init(){
  					var _self =this;
		  			this.headerController('消息','messageList','headerComponents');
		  			units.Scroll.scrollController.el='toc_IM_chat_content';
		  			units.Scroll.watchScroll(null,scroll=>{
								if(scroll.action=='bottom'&&scroll.relativeMargin<50){
										console.log(1)
								};
						});
  		}
  	}
 	}
</script>

<style>
	.flip-list-move {
	  transition: transform 1s;
	}
	div.messageList{
		position: relative;
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}
	div.messageList ul{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	div.messageList ul li.messageListItem{
		width: 100%;
		height: 60px;
		line-height: 1;
		background-color: #fff;
		box-sizing: border-box;
		position: relative;
		padding: 5px 10px;
		-webkit-user-select: none;
	}
	div.messageList ul li.messageListItem:after{
		content: " ";
	    position: absolute;
	    left: 60px;
	    bottom: 0;
	    right: 0;
	    height: -1px;
	    border-top: 1px solid #C0BFC4;
	    color: #C0BFC4;
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	}
	div.messageList ul li.messageListItem img.avata{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
		float: left;
	    margin: 5px 0;
	}
	div.messageList ul li.messageListItem div.info{
		position: relative;
		height: 100%;
		width: calc(100% - 50px);
		float: left;
		margin-left: 10px;
	}
	div.messageList ul li.messageListItem p{
		float: left;
		margin: 5px 0;
		font-size: 14px;
	}
	div.messageList ul li.messageListItem span.time{
		position: absolute;
		right:0;
		top: 5px;
		font-size: 12px;
		color: #666;
	}
	div.messageList ul li.messageListItem div.last{
		position: absolute;
		bottom: 5px;
		left: 0;
		font-size: 12px;
		width: 80%;
		color: #666;
		text-overflow: ellipsis;
	  overflow: hidden;
	  white-space: nowrap;
	  height: 14px;
	}
	div.messageList ul li.messageListItem div.last img.face_item{
		width: 12px;
		height: 12px;
	}
</style>
